<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    input[type="checkbox"]:checked + label {
      color: red;
      font-style: italic;
    }
    input:required { border: 1px solid #f00;}
    input:optional { border: 1px solid #ccc;}

    input[type="email"]:focus {
      background-position: 100% 50%;
      background-repeat: no-repeat;
    }
    input[type="email"]:focus:invalid {
      background-image: url(warning.jpg);
    }
    input[type="email"]:focus:valid {
      background-image: url(checkmark.jpg);
    }
    input[type="number"]:invalid {color: red;}
    input[type="number"]:in-range {font-weight: bold;}

    textarea:read-only {
      opacity: 0.75;
    }
    pre:read-write:hover {
      border: 1px dashed green;
    }

    p:target {
  background-color: gold;
}

/* Add a pseudo-element inside the target element */
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/* Style italic elements within the target element */
p:target i {
  color: red;
}

/*段落匹配的第一个元素的首字母，只能应用于块显示元素*/
p:first-of-type::first-letter {
  font-size: 200%;
}

/*首行，只能应用于块显示元素*/
p::first-line {
  font-size: 150%;
  color: purple;
}

body::before {
  content: "]]";
  color: silver;
}
body::after {
  content: "The End.";
}
</style>
<body>
    <div>
      <input id="chbx" type="checkbox"> <label for="chbx">I am a label</label>
      <div>     
         <input type="email" placeholder="enter an email address" required>
        <input type="email" placeholder="optional email address">
        <input type="email" placeholder="optional email address" required="false">
      </div>
      <div>
        <input type="email">
        <input id="by-tens" type="number" min="0" max="1000" step="10" value="23" />
      </div>
      <div>
        <textarea disabled></textarea>
        <pre contenteditable>Type your own code!</pre>
      </div>
        <table>
            <tr>
                <th scope="row">Count</th>
                <td>7</td><td>6</td><td>11</td>
              </tr>
              <tr>
                <td>Q</td><td>X</td><td>-</td>
              </tr>
        </table>
      </div>

      <div>
        
      <h3>Table of Contents</h3>
      <ol>
        <li><a href="#p1">Jump to the first paragraph!</a></li>
        <li><a href="#p2">Jump to the second paragraph!</a></li>
        <li>
          <a href="#nowhere">
            This link goes nowhere, because the target doesn't exist.
          </a>
        </li>
      </ol>
      
      <h3>My Fun Article</h3>
      <p id="p1">
        You can target <i>this paragraph</i> using a URL fragment. Click on the link
        above to try out!
      </p>
      <p id="p2">
        This is <i>another paragraph</i>, also accessible from the links above. Isn't
        that delightful?
      </p>
      </div>
      
      <p>This is a p element, with a styled first
        letter</h2>
</body>
</html>